fix(chat): user-bubble word-wrap — give .chat-message__layout width:100%#362
Merged
Conversation
Short user messages like "Show me the dashboard" wrap mid-phrase
("Show me the" / "dashboard"). Fixed three times before in #313, #325,
and c0b9e88, each by tweaking which element holds the 80% cap — none
addressed the architecture.
Root cause: user-role host is `display:flex; justify-content:flex-end`
with no width on .chat-message__layout. __main has max-width:80%, which
resolves against layout (its containing block). Layout in turn shrinks
to __main's content (flex item with auto basis). The browser breaks the
circular dependency by capping the bubble at its fit-content intrinsic
(~166px = the wrap-point width) instead of max-content (~200px = full
text on one line). Verified live: forced max-content = 199.75px,
fit-content = 166.20px, with old layoutW = 207.75px — the bug is exact.
Fix: layout gets width:100% so __main's 80% has a concrete (and full-
row) containing block. Host switches from flex to block; right-alignment
moves down to layout (`justify-content: flex-end` on the layout flex
container).
Verified via chrome MCP after fix: bubbleW = 199.75px (full max-content),
mainW = 199.75px, layoutW = 720px (full row), bubble renders single-line
right-aligned.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Short user messages like "Show me the dashboard" wrap mid-phrase ("Show me the" / "dashboard"). Fixed three times before — see PRs #313, #325, c0b9e88 — each tweak shifted which element holds the
max-width: 80%cap, but none addressed why the cap can't compute correctly.Root cause (verified live in chrome)
display: flex; justify-content: flex-endwith no width on.chat-message__layout.chat-message__mainhasmax-width: 80%which resolves against.chat-message__layout(its containing block).chat-message__layoutitself shrinks to__main's content (single-child flex container, no defined width)__main's width,__main's 80% depends on layout, layout depends on bubbleBrowser breaks the cycle by capping the bubble at its wrap-point intrinsic width instead of max-content. Direct measurement:
That ~166px (minus 24px padding) is too narrow for "Show me the dashboard" → mid-phrase wrap.
Fix
.chat-message__layout { width: 100% }— gives__main'smax-width: 80%a concrete, full-row containing blockdisplay: block(wasflex); right-alignment moves to layout viajustify-content: flex-endThe 80% cap stays exactly where it was; we just make it resolve against a real number.
Test plan
bubbleW = 199.75 px,mainW = 199.75 px,layoutW = 720 px, screenshot confirms "Show me the dashboard" renders single-line and right-alignedLibrary — lint / test / buildFiles
libs/chat/src/lib/primitives/chat-message/chat-message.component.ts—.chat-message__layout { width: 100% }+ comment explaining the prior-PR historylibs/chat/src/lib/styles/chat-message.styles.ts— host user-role:display:block; layout user-role:justify-content:flex-end🤖 Generated with Claude Code